<script setup lang="ts" name="BpmnExports">
import { downloadFile, setEncoded } from '../../../utils/files'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'

const downloadProcess = async (type) => {
  console.log(type)
  try {
    const name = 'diagram'
    const modeler = useModelerStore().getModeler
    if (type === 'xml' || type === 'bpmn') {
      const { error, xml } = await modeler.saveXML({})
      if (error) {
        console.error(`[流程设计器警告]: ${error.message || error}`)
      }
      const { href, filename } = setEncoded(type.toUpperCase(), name, xml!)
      downloadFile(href, filename)
    } else {
      const { svg } = await modeler.saveSVG()
      const { href, filename } = setEncoded('SVG', name, svg!)
      downloadFile(href, filename)
    }
  } catch (e) {
    console.error(`[流程设计器警告]: ${e.message || e}`)
  }
}
</script>

<template>
  <el-dropdown placement="bottom-start" @command="downloadProcess">
    <div class="item-button">
      <svg-icon icon="ri:save-line"></svg-icon>
      <svg-icon icon="ri:arrow-drop-down-line"></svg-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="bpmn">另存为BPMN文件</el-dropdown-item>
        <el-dropdown-item command="xml">另存为XML文件</el-dropdown-item>
        <el-dropdown-item command="svg">另存为SVG文件</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.el-dropdown {
  .item-button {
    width: auto;
    line-height: 0;

    .el-icon {
      margin-left: 6px;
    }

    .el-icon+.el-icon {
      margin-right: 2px;
      margin-left: 0;
    }
  }
}

.item-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 2px;
  border-radius: 2px;
  cursor: pointer;

  &:hover {
    background-color: var(--el-color-primary-light-9);

    .el-icon {
      color: var(--el-color-primary);
    }
  }

  .el-icon {
    font-size: 20px !important;
  }
}
</style>
